import * as d3 from "d3"
import moment from "moment"
import { createXRowLine, createClipPath, appendXRowTick, _yAxisClipPath, updateYColTicks, createXAxis, createYAxis } from "./gantt.axis"
import * as lodash from "lodash"
import { drawPlans } from "./gantt.rect"

const _ctx = {
    width: 1400,
    height: 500,
    marginTop: 60,
    marginRight: 0,
    marginBottom: 5,
    marginLeft: 0,
    yUpdate: function () { }
}

export function initChart(svgEle, config) {
    config = config || {}
    let ctx = {
        ..._ctx,
        ...config,
        startTime: moment("2022-01-09"),
        endTime: moment("2024-11-09"),

    }
    ctx.zoomChanged = () => {
        drawPlans(svg, ctx)
    }

    const { width, height, marginTop, marginRight, marginBottom, marginLeft } = ctx

    let svg = d3.select(svgEle)
        .attr("class", "svg-gantt")
        .attr("viewBox", [0, 0, width, height])
        .attr("width", width)
        .attr("height", height)
        .attr("style", "max-width: 100%; height: auto;");
    const defs = svg.append("defs")
    createXAxis(svg, ctx)
    createYAxis(svg, ctx)


    ctx.update = (yDatas, plans, timeZone) => {
        ctx.plans = plans


        const { startTime, endTime, deadTime } = timeZone || {}
        // console.log("timeZone", timeZone)
        if (startTime !== undefined) {
            ctx.startTime = startTime
            ctx.endTime = endTime
            ctx.deadTime = deadTime
        }


        ctx._updateXDomains(startTime, endTime)
        ctx._updateYDomains(yDatas)
        drawPlans(svg, ctx)
    }

    return ctx;
}



